<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<style lang="stylus">
#app {
  width: 100%;
  font-size: 14px;
  color: #333;
  height :100%

  .main-box {
    margin: 164px 20px 20px 320px;
    height: calc(100vh - 184px);
    transition: margin .4s;
	  -webkit-transition: margin .4s;
    .ql-snow.ql-toolbar:after,
    .ql-snow .ql-toolbar:after {
      display: inline-block;
    }
  }

  img {
    vertical-align: top;
  }
}

.pic {
  position: relative;

  img {
    position: absolute;
    cursor: pointer;
    transition: transform .4s;
    -moz-transition: -moz-transform .4s;
    -webkit-transition: -webkit-transform .4s;
    -o-transition: -o-transform .4s;

    &:hover {
      z-index: 99;
      transform: scale(3);
      -ms-transform: scale(3);
      -moz-transform: scale(3);
      -webkit-transform: scale(3);
      -o-transform: scale(3);
      box-shadow: 0 0 4px rgba(0,0,0,.2);
    }
  }
}

.relative{
  position: relative;
}

.absolute {
  position: absolute;
}

.time-line {
  float: left;
  margin: 0 5px;
}
</style>
